﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="KPIBreakDownPage.aspx.cs" Inherits="FBKPI.Pages.KPIBreakDownPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript">
        var iTableCounter = 1;
        var oTable;
        var oTable2;
        var oInnerTable;
        var TableHtml;
        var ParentID;
        $(document).ready(function () {
            mainmenu("#nav ul", "#nav li");
            mainmenu("#menu_wrap ul", "#menu_wrap li");

            $("#tabs").tabs();

            $("#divdetail").hide();
            $("#divdetail").dialog({
                title: '<span class="header-text">KPI Form</span>',
                autoOpen: false,
                width: 1000,
                height: 500,
                modal: true,
                resizable: false
            });


            //datatable section
            oTable = $("#KPITable").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                    "sSearch": "Search"
                },
                "bSort": true,
                "bPaginate": true,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bDeferRender": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "../Serializer/KPIPIckedBreakDownSerializer.ashx?User=" + $("#txt_user").val() + "&Year=" + $("#txt_selectyear").val(),
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "aoColumns": [
            {
                "mData": "ID2"
            },

            {
                "mData": "ID", "sWidth": "3%"
            }, {
                "mData": "No", "sWidth": "3%"
            }, {
                "mData": "Description"
            }, {
                "mData": "GroupKPI"
            }, {
                "mData": "CategoryKPI"
            }, {
                "mData": "TypeKPI"
            }, {
                "mData": "SubTypeKPI"
            }, {
                "mData": "Periode", "sWidth": "8%"
            }, {
                "mData": "Weight", "sWidth": "5%"
            },

            {
                "mData": "UoMMax"
            },
            {
                "mData": "UoMMin"
            }
            ,
            {
                "mData": "isActive", "sWidth": "8%"
            }

            ],
                "aoColumnDefs": [{
                    "fnRender": function (oObj) {
                        return "<img src='../images/plus.gif' class='imagetree'/>";
                    },
                    "aTargets": [0]
                },

             {
                 "fnRender": function (oObj) {
                     return "<a href=\"#\" onclick=\"DirectTo('" + oObj.aData["ID"] + "', '" + $("#txt_user").val() + "')\"><img src='../images/detail.png' /></a>";

                     //return "<a href=\"#\" onclick=\"DirectTo('" + oObj.aData["ID"] + "')\"><img src='../images/detail.png' /></a>";
                 },
                 "aTargets": [1]
             }, {
                 "fnRender": function (oObj) {
                     if (oObj.aData["isActive"] == 'True') {
                         return "<img src='../images/check.png' />"
                     } else {
                         return "<img src='../images/cross.png' />"
                     }
                 },
                 "aTargets": [12]
             },
             {
                 "bVisible": false,
                 "aTargets": [4, 5, 6, 7]
             },
              {
                  "sClass": "center",
                  "aTargets": [0, 2, 1, 9, 12]
              }]
            });

            //mark selected row
            $('body').on("click", '#KPITable tbody tr', function () {
                $('#KPITable tbody tr').removeClass("row_selected");
                $(this).addClass("row_selected");
            });
            //--------------------end of mark selected row-----------------------------
            //$("#KPITable_filter label").after('&nbsp;KPI Year: <input id=\"txt_selectyear\" oninput=\'GetList($(this).val());\' type=\"text\" \>');
            //--------------------end of datatable section-----------------------------------------

            DirectTo = function (KPIID, user) {
                document.location = "../Pages/InputBreakDownKPIPage.aspx?User=" + user + "&KPI=" + KPIID;
                return false;
            }

            $('#KPITable tbody td img.imagetree').live('click', function () {
                var nTr = $(this).parents('tr')[0];
                var rowIndex = oTable.fnGetPosition($(this).parents('tr')[0]);
                var aData = oTable.fnGetData(rowIndex);
                //alert(aData.ID.toString());

                //koding asal Ryan yang bikin pertama kale
                //ParentID = aData.ID.toString().replace("<a href=\"#\" onclick=\"DirectTo('", "").replace("', '3')\"><img src='../images/detail.png' /></a>", "");
                //rubah get Parent ID by Beni
                var ParentID = aData.ID.toString().replace("<a href=\"#\" onclick=\"DirectTo('", "");
                ParentID = ParentID.replace("')\"><img src='../images/detail.png' /></a>", "");
                ParentID = ParentID.replace("'", "");
                ParentID = ParentID.replace("'", "");

                //alert(ParentID);
                TableHtml = $("#TempTable").html(); ;

                if (oTable.fnIsOpen(nTr)) {
                    /* This row is already open - close it */
                    this.src = "../images/plus.gif";
                    oTable.fnClose(nTr);
                }
                else {
                    /* Open this row */
                    this.src = "../images/minus.gif";
                    oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, TableHtml), 'Expand');
                    oInnerTable = $("#KPITable_" + iTableCounter).dataTable({
                        "oLanguage": {
                            "sZeroRecords": "No records to display",
                            "sSearch": "Search"
                        },
                        "bSort": false,
                        "sSearch": false,
                        "bPaginate": true,
                        "bAutoWidth": false,
                        "bProcessing": true,
                        "bServerSide": true,
                        "bDestroy": true,
                        "bJQueryUI": true,
                        "sPaginationType": "full_numbers",
                        "bDeferRender": true,
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            $.ajax({
                                "dataType": 'json',
                                "type": "GET",
                                "url": "../Serializer/KPIPickedExpandSerializer.ashx?User=" + $("#txt_user").val() + "&KPIParent=" + ParentID,
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "aoColumns": [{
                            "mData": "No", "sWidth": "5%"
                        }, {
                            "mData": "Description"
                        }
                        , {
                            "mData": "GroupKPI"
                        }, {
                            "mData": "CategoryKPI"
                        }, {
                            "mData": "TypeKPI"
                        }, {
                            "mData": "SubTypeKPI"
                        },
                        {
                            "mData": "Periode", "sWidth": "8%"
                        },
                        {
                            "mData": "Weight", "sWidth": "5%"
                        },
                        {
                            "mData": "UoMMax"
                        },
                        {
                            "mData": "UoMMin"
                        }

                        , {
                            "mData": "isActive", "sWidth": "8%"
                        }

                        ],
                        "aoColumnDefs": [{
                            "fnRender": function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                } else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [10]
                        },
                        {
                            "bVisible": false,
                            "aTargets": [2, 3, 4, 5]
                        },
                         {
                             "sClass": "center",
                             "aTargets": [0, 10, 7]
                         }]
                    });
                    iTableCounter = iTableCounter + 1;
                }
            });


            //datatable section
            oTable2 = $("#BreakDownTable").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                    "sSearch": "Search"
                },
                "bSort": true,
                "bPaginate": true,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bDeferRender": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "../Serializer/KPIBreakDownSerializer.ashx?User=" + $("#txt_user").val() + "&Year=" + $("#txt_selectyear2").val(),
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "aoColumns": [
            {
                "mData": "ID", "sWidth": "3%"
            }, {
                "mData": "No", "sWidth": "5%"
            }, {
                "mData": "Description"
            }
            , {
                "mData": "KPIParent"
            }, {
                "mData": "GroupKPI"
            }, {
                "mData": "CategoryKPI"
            }, {
                "mData": "TypeKPI"
            }, {
                "mData": "SubTypeKPI"
            }, {
                "mData": "Periode", "sWidth": "5%"
            },

             {
                 "mData": "Weight", "sWidth": "5%"
             },

            {
                "mData": "UoMMax"
            },
            {
                "mData": "UoMMin"
            }
            , {
                "mData": "isActive"
            }


            ],
                "aoColumnDefs": [{
                    "fnRender": function (oObj) {
                        return "<a href=\"#\" onclick=\"OnDetail('" + oObj.aData["ID"] + "','detail')\"><img src='../images/detail.png' /></a>";
                    },
                    "aTargets": [0]
                }, {
                    "fnRender": function (oObj) {
                        if (oObj.aData["isActive"] == 'True') {
                            return "<img src='../images/check.png' />"
                        } else {
                            return "<img src='../images/cross.png' />"
                        }
                    },
                    "aTargets": [12]
                },
                 {
                     "bVisible": false,
                     "aTargets": [4, 5, 6, 7]
                 },
                {
                    "sClass": "center",
                    "aTargets": [0, 1, 9, 12]
                }]
            });

            //mark selected row
            $('body').on("click", '#BreakDownTable tbody tr', function () {
                $('#BreakDownTable tbody tr').removeClass("row_selected");
                $(this).addClass("row_selected");
            });
            //--------------------end of mark selected row-----------------------------
            //$("#BreakDownTable_filter label").after('&nbsp;KPI Year: <input id=\"txt_selectyear2\" oninput=\'GetList2($(this).val());\' type=\"text\" \>&nbsp;<button id=\"btnAddNew\" style="right: 0px;" onclick=\'OnDetail(0,"create");return false;\'>New Record</button>');
            //--------------------end of datatable section-----------------------------------------

            OnDetail = function (code, mode) {
                //alert(mode);
                if (code == '0') {
                    LoadForm('KPIForm.aspx?ID=' + code, function (result) {
                        $("#divdetail").html(result);
                        $("#divdetail").dialog('open');
                    });
                }
                else {
                    //KPIBreakDownForm
                    LoadForm('KPIForm.aspx?ID=' + code + '&mode=' + mode, function (result) {
                        $("#divdetail").html(result);
                        $("#divdetail").dialog('open');
                    });
                }
                return false;
            }

        });

        GetList = function (value) {
            if (value.length > 0) {
                var xx = '0123456789';
                if (xx.indexOf(value[value.length - 1]) < 0) {
                    $("#txt_selectyear").val(value.toString().replace(value[value.length - 1], ''));
                }

                if (value.length == 4) {
                    oTable.fnDraw();
                }
            }
            else
            { oTable.fnDraw(); }
        }

        GetList2 = function (value) {
            if (value.length > 0) {
                var xx = '0123456789';
                if (xx.indexOf(value[value.length - 1]) < 0) {
                    $("#txt_selectyear2").val(value.toString().replace(value[value.length - 1], ''));
                }

                if (value.length == 4) {
                    oTable2.fnDraw();
                }
            }
            else
            { oTable2.fnDraw(); }
        }

        function fnFormatDetails(table_id, html) {
            var sOut = "<table cellpadding=\"0\" cellspacing=\"0\" class=\"ExpandTable\" id=\"KPITable_" + table_id + "\">";
            sOut += html;
            sOut += "</table>";
            return sOut;
        }
    
    </script>
    <style>
        .Expand .fg-toolbar
        {
            display: none;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div style="height: 525px; overflow: auto;">
        <div id="kpitable">
            <div class="customPageHeader">
                <span class="customPageTitle">Breakdown KPI</span>
            </div>
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">PICKED KPI</a></li>
                    <li><a href="#tabs-2">BREAKDOWN LIST</a></li>
                </ul>
                <div id="tabs-1">
                    <div>
                        <table cellpadding="0" cellspacing="0" class="display" id="KPITable">
                            <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th>
                                    </th>
                                    <th>
                                        No
                                    </th>
                                    <th>
                                        KPI Description
                                    </th>
                                    <th>
                                        Group
                                    </th>
                                    <th>
                                        Category
                                    </th>
                                    <th>
                                        Type
                                    </th>
                                    <th>
                                        Sub Type
                                    </th>
                                    <th>
                                        Periode
                                    </th>
                                    <th>
                                        Weight
                                    </th>
                                    <th>
                                        UoM Max.
                                    </th>
                                    <th>
                                        UoM Min.
                                    </th>
                                    <th>
                                        is Active
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="tabs-2">
                    <div>
                        <table cellpadding="0" cellspacing="0" class="display" id="BreakDownTable">
                            <thead>
                                <tr>
                                <th>
                        </th>
                                    <th>
                                        No
                                    </th>
                                    <th>
                                        KPI Description
                                    </th>
                                    <th>
                                        KPI Parent
                                    </th>
                                    <th>
                                        Group
                                    </th>
                                    <th>
                                        Category
                                    </th>
                                    <th>
                                        Type
                                    </th>
                                    <th>
                                        Sub Type
                                    </th>
                                    <th>
                                        Periode
                                    </th>
                                    <th>
                                        Weight
                                    </th>
                                    <th>
                                        UoM Max.
                                    </th>
                                    <th>
                                        UoM Min.
                                    </th>
                                    <th>
                                        is Active
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <br />
        </div>
        <div id="divdetail">
        </div>
        <div id="divTemp" style="display: none">
            <table id="TempTable">
                <thead>
                    <tr>
                        
                        <th>
                            No
                        </th>
                        <th>
                            KPI Description
                        </th>
                        <th>
                            Group
                        </th>
                        <th>
                            Category
                        </th>
                        <th>
                            Type
                        </th>
                        <th>
                            Sub Type
                        </th>
                        <th>
                            Periode
                        </th>
                        <th>
                            Weight
                        </th>
                        <th>
                            UoM Max.
                        </th>
                        <th>
                            UoM Min.
                        </th>
                        <th>
                            is Active
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</asp:Content>
